<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<style>
    .error {
        box-sizing: border-box;
        height: 35px;
        width: 200px;
        border: 2px solid red;
        border-radius: 2px;
        background: rgba(238, 10, 36, 0.64);
        color: #fff;
        user-select: none;
        transform: scaleX(0) scaleY(0) translateY(-50px);
        transition: all .4s linear;
    }

    .error.active {
        transform: scaleX(1) scaleY(1) translateY(20px);
    }
</style>
<body>
<div class="error" id="info-notice">
    <span onclick="closeInfo(this)" id="close-info">❌</span>操作未被执行
</div>
<br>
<br>
<br>
<button onclick="show()">显示</button>
<script type="text/javascript">
    let timer = null;

    function closeInfo(e) {
        e.parentNode.classList.remove("active");
    }

    function show() {
        document.getElementById("info-notice").classList.add("active")
    }

    clearInterval(timer);
    timer = setInterval(() => {
        document.getElementById("info-notice").classList.remove("active")
    }, 4000);

</script>
</body>
</html>